<template>
  <q-modal
    v-model="layoutModal"
    maximized
    position="right"
    :content-css="{minWidth: '100vw', minHeight: '100vh'}"
  >
    <q-modal-layout content-class="flex column modal-content">
      <template slot="header">
        <statusbar></statusbar>
        <q-toolbar>
          <!-- <q-btn color="primary" v-close-overlay label="Close" /> -->
          <q-btn flat round dense @click="closeModal" icon="reply"/>
          <q-toolbar-title>{{ $t('断面测点详情') }}</q-toolbar-title>
        </q-toolbar>
      </template>
      <!-- modal-body、modal-content -->
      <template v-if="detailInfo">
        <div class="col-auto">
          <!-- info -->
          <div class="row no-wrap items-stretch info">
            <table class="col table">
              <tr>
                <th>{{ $t('标段') }}</th>
                <td>{{ detailInfo.tendername }}</td>
              </tr>
              <tr>
                <th>{{ $t('工区') }}</th>
                <td>{{ detailInfo.wa || '--' }}</td>
              </tr>
              <tr>
                <th>{{ $t('工点') }}</th>
                <td>{{ detailInfo.wsguidname }}</td>
              </tr>
              <tr>
                <th>{{ $t('断面') }}</th>
                <td>{{ detailInfo.csec_name }}</td>
              </tr>
            </table>
            <div class style="width: 30%;">
              <img
                :src="'data:image/png;base64,' + detailInfo.photo"
                style="width: 100%;height: 100%;"
                :alt="detailInfo.csec_type"
              >
            </div>
          </div>
          <!-- search box -->
          <q-list highlight separator class="search-box">
            <q-item class="bg-white" @click.native="actionSheetClick">
              <q-item-main>
                <span>{{ $t('测点(线)选择') }}：</span>
                <span style="float: right;">{{ pointTMP.label || 'Not Found' }}</span>
              </q-item-main>
              <q-item-side right>
                <q-item-tile icon="navigate_next" color="green"/>
              </q-item-side>
            </q-item>
          </q-list>
        </div>
        <!-- tabs -->
        <q-tabs ref="tabsDOM" no-pane-border color="secondary"
          inverted @select="tabSelected" v-model="tabActiveName" class="col tabs-funs relative-position" >
          <!-- 选项卡 -->
          <q-tab slot="title" name="tab-1" :label="$t('变形曲线')"/>
          <q-tab slot="title" name="tab-2" :label="$t('回归分析')"/>
          <q-tab slot="title" name="tab-3" :label="$t('量测数据')"/>
          <q-tab slot="title" name="tab-4" :label="$t('报警记录')"/>
          <!-- 目标 -->
          <!-- <q-tab-pane name="tab-1">变形曲线</q-tab-pane>
          <q-tab-pane name="tab-2">回归分析</q-tab-pane>
          <q-tab-pane name="tab-3">量测数据</q-tab-pane>
          <q-tab-pane name="tab-4">报警记录</q-tab-pane>-->
          <component v-bind:is="currentTabComponent" :dealData="pointTMP"></component>
          <!--
            将QInnerLoading放置为最后一个子元素。
            这对于将其显示在其他内容之上很重要。
          -->
          <q-inner-loading :visible="tabPaneLoading">
            <q-spinner-gears size="50px" color="primary"></q-spinner-gears>
          </q-inner-loading>
        </q-tabs>
      </template>
      <!--
        将QInnerLoading放置为最后一个子元素。
        这对于将其显示在其他内容之上很重要。
      -->
      <q-inner-loading :visible="boxLoading">
        <template v-if="boxLoadingContent">{{ boxLoadingContent }}</template>
        <q-spinner-gears v-else size="50px" color="primary"></q-spinner-gears>
      </q-inner-loading>
    </q-modal-layout>
  </q-modal>
</template>

<script>
import DeformationCurve from './tabs/DeformationCurve.vue';
import Regression from './tabs/Regression.vue';
import MeasureData from './tabs/MeasureData.vue';
import AlarmRecord from './tabs/AlarmRecord.vue';
export default {
  name: 'detail',
  components: {
    DeformationCurve,
    Regression,
    MeasureData,
    AlarmRecord
  },
  data() {
    return {
      tabActiveName: '',
      tabsMap: {
        'tab-1': 'deformation-curve',
        'tab-2': 'regression',
        'tab-3': 'measure-data',
        'tab-4': 'alarm-record'
      },
      layoutModal: false,
      boxLoading: true,
      boxLoadingContent: '',
      tabPaneLoading: false,
      detailInfo: false,
      pointTMP: {},
      actionSheetOptions: {
        title: this.$t('请选择测点、侧线'),
        grid: false,
        actions: []
      },
    }
  },
  computed: {
    currentTabComponent() {
      return this.tabsMap[this.tabActiveName];
    }
  },
  watch: {
    '$store.getters.subCurrPage'(val) {
      if (val === 'data-detailPage') {
        this.layoutModal = false
      }
    }
  },
  methods: {
    show(data) {
      this.layoutModal = true;
      this.detailInfo = false;
      this.boxLoading = true;
      this.$store.dispatch('AddSubPage', 'data-detailPage', true)
      this.$nextTick(() => {
        // 延迟
        setTimeout(() => {
          this.getCsecDetail(data);
        }, 500)
      })
    },
    closeModal() {
      this.layoutModal = false
      this.$store.dispatch('RemoveSubPage')
    },
    getCsecDetail(data) {
      this.detailInfo = false;
      this.boxLoading = true;
      this.boxLoadingContent = '';
      this.tabActiveName = '';
      return this.$axios.getCsecDetail({
        id: data.csecid
      }).then(result => {
        // 字段差异需要合并
        this.detailInfo = Object.assign({}, data, result.data);
        // 点，线----选择表
        this.actionSheetOptions.actions = result.data.points.map((item) => {
          return {
            label: item.point_alias,
            detailInfo: this.detailInfo,
            data: item
          };
        });
        this.pointTMP = this.actionSheetOptions.actions[0] || {};// 默认选中
        this.boxLoading = false;
        this.$nextTick(() => {
          this.tabActiveName = 'tab-1';// 默认触发第一个面板
        });
      }).catch(err => {
        this.boxLoadingContent = err.msg || this.$t('没有发现数据');
      });
    },
    actionSheetClick() {
      this.$q.actionSheet(this.actionSheetOptions).then(action => {
        this.pointTMP = action;
        let copy_tab_name = this.tabActiveName;
        this.$refs.tabsDOM.selectTab('');
        // 异步选择解决不刷新问题
        this.$nextTick(() => {
          this.$refs.tabsDOM.selectTab(copy_tab_name);
        })
      }).catch(err => err);
    },
    tabSelected(tab_name) {
      if (!tab_name) return;// 错误
      // console.log(tab_name);
    }
  }
}
</script>

<style lang="less" scoped>
.q-modal-layout /deep/ .modal-content {
  background-color: #efefef;

  .col-auto, .q-tabs{
    width: 100%;
  }
}
// 详情
.info {
  padding: 6px 0 6px 5px;
  font-size: 14px;
  background-color: #ffffff;
  margin-bottom: 8px;
}

.table {
  tr {
    th {
      background-color: #33bfff;
      color: #ffffff;
      font-weight: 400;
    }
  }
}
// 过滤狂
.search-box {
  border: none;
  padding: 0;
  margin-bottom: 10px;
}
// tabs
.tabs-funs {
  // 面板box，样式
  /deep/ .q-tabs-panes {
    display: flex;
    height: 100%;
    // position: relative;
  }
}
</style>

